<!--  -->
<script setup>
import moment from 'moment'
import { useBreadsStore, useSiteStore } from '@/stores'
import { getPicsListAPI } from '@/apis/pic'
import { ref, watch, onMounted } from 'vue'
import LikeOrBad from '@/components/LikeOrBad.vue'
const { setBreadCrumbs } = useBreadsStore()

const siteStore = useSiteStore()
setBreadCrumbs([{ title: 'paint', path: '/paint' }])

const baseUrl = 'https://cycleif.cn:9000'
const pics = ref([])

onMounted(() => {
  getPicsListAPI().then(res => {
    pics.value = res.data
  })
})

const isDark = ref(false)
watch(() => siteStore.getTheme(), (v) => {
  isDark.value = v === 'dark'
}, { immediate: true })

</script>

<template>
  <div class="view-wrapper">
    <div class="view-header">
      <div class="view-title">绘</div>
      <div class="view-subtitle">え</div>
    </div>
    <div class="view-body">
      <div v-for="v in pics" :key="v.id" class="box">
        <div class="describe">
          <p class="date">{{ moment(v.createAt).format('YYYY-MM-DD') }}</p>
        </div>
        <div class="main-pic">
          <div class="line"></div>
          <p class="desc">{{ v.remark }}</p>
          <img class="img" :class="{ 'dark-img': isDark }" :src="baseUrl + v.url" :alt="v.remark">
          <LikeOrBad :init-cnt="v.voteCount" :init-status="v.voteStatus" :object-id="v.id" object-type="pic" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.view-wrapper {
  margin: 50px auto 20px;
  flex: 1;
  width: 80%;
  height: 100%;
  background-color: var(--view-category-bgc);
  box-shadow: 0px 3px 4px var(--site-home-shadow);
  border: 1px solid var(--border-primary);
  border-radius: 2px;

  @media screen and (max-width: 768px) {
    width: 95%;
  }

  @media screen and (min-width: 769px) and (max-width: 882px) {
    width: 90%;
  }
}

.view-header {
  margin: 10px 0 20px;
  padding-bottom: 10px;
  background-image: var(--site-banner-linear);
  box-shadow: 0px 4px 4px rgba(64, 64, 57, 0.486);
}

.view-title {
  padding-top: 10px;
  padding-bottom: 0px;
  font-family: "Oswald", "Bookman Old Style", serif;
  font-size: 2.50rem;
  letter-spacing: 0.12rem;
  width: max-content;
  margin: auto;
  color: var(--site-home-title);
  border-bottom: 1px solid var(--site-home-title);
}

.view-subtitle {
  font-family: Roboto, inherit "Merienda", sans-serif;
  font-weight: 400;
  font-size: .75rem;
  color: #719475;
  letter-spacing: 0.100rem;
  margin: auto;
  width: max-content;
}

.view-body {
  width: 100%;
  height: 100%;
  margin-top: 40px;
}


.box {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  gap: 1em;
  margin-bottom: 40px;

  @media screen and (min-width: 0px) and (max-width: 426px) {
    width: 95%;
  }

  @media screen and (min-width: 427px) and (max-width: 768px) {
    width: 80%;
  }

  @media screen and (min-width: 769px) and (max-width: 882px) {
    width: 77%;
  }
}

.img {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  border-radius: 3px;

}

.dark-img {
  filter: brightness(.9);
}

.main-pic {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  flex-direction: column;
  gap: 10px;


  .desc {
    font-size: 1.2rem;
    font-family: "Oswald", "Bookman Old Style", serif;
    color: var(--text-02);
  }

  & img {
    max-width: 400px;
    height: auto;

    @media screen and (min-width: 0px) and (max-width: 427px) {
      width: 80%;
    }

    @media screen and (min-width: 427px) and (max-width: 768px) {
      width: 75%;
    }

    @media screen and (min-width: 769px) and (max-width: 882px) {
      width: 70%;
    }
  }

}

.describe {
  flex: 1;
  margin: 20px 0 10px;
  font-family: "Oswald", "Bookman Old Style", serif;
  color: var(--text-02);
  display: flex;
}
</style>
